const { useState, useRef, useEffect } = React;
const { Dropdown, Space } = antd;
const { DownOutlined } = icons

const LangDropdown = ({OnChange}) => {
  const [open, setOpen] = useState(false);
  const handleMenuClick = (e) => {
    if (e.key === '3') {
      setOpen(false);
    }

    // print(e)
    if(OnChange){
      OnChange(e)
    }
  };
  const handleOpenChange = (nextOpen, info) => {
    if (info.source === 'trigger' || nextOpen) {
      setOpen(nextOpen);
    }
  };
  const items = ['markdown', 'javascript', 'rust'].map(it=>{
    return {
      label: it,
      key: it,
    }
  })

  return (
    <div style={{float: 'right', marginTop: '-20px'}} >
      <Dropdown
        menu={{
          items,
          onClick: handleMenuClick,
        }}
        onOpenChange={handleOpenChange}
        open={open}
      >
        <a onClick={(e) => e.preventDefault()}>
          <Space>
            markdown
            <DownOutlined />
          </Space>
        </a>
      </Dropdown>
    </div>
  );
};
